<template>
    <div class="player">
      <div id="player"></div>
    </div>
</template>

<script>
export default {
  name:"Player",
  data () {
    return {

    }
  },
  mounted(){
      this.get_video_data();
  },
  methods: {
      get_video_data(){
          let user_name = localStorage.username || sessionStorage.username;
          let token = localStorage.token || sessionStorage.token;
          console.log(this.$route.params.vid);
          let self = this;
          var player = polyvPlayer({
              wrap:'#player',
              width: document.documentElement.clientWidth - 300,
              height: document.documentElement.clientHeight,
              vid: this.$route.params.vid,
              playsafe:(vid,next)=>{
                  self.$axios.get(`${this.$settings.Host}/course/polyv/token/?vid=${self.$route.params.vid}`,{
                      headers:{
                          'Authorization': 'jwt ' + token
                      }
                  }).then((res)=>{
                      next(res.data.token);
                  }).catch((error)=>{

                  })
              }

          })
      }
  },
  computed: {
  }
}
</script>

<style scoped>
</style>
